.transform-rotate {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: center;
  height: 200px;

  .container {
    width: 100px;
    height: 100px;
    margin: 20px;
    background-color: #c9c9c9;
  }

  .item {
    width: 100px;
    height: 100px;
    opacity: 0.5;
    background-color: #bae7ff;
    transform-origin: 0 0;
  }

  .fourty-five {
    transform: rotate(45deg);
  }

  .ninty {
    transform: rotate(90deg);
  }

  .one-eighty {
    transform: rotate(180deg);
  }

  .two-eighty-five {
    transform: rotate(285deg);
  }

  .three-sisty {
    transform: rotate(360deg);
  }
}
